<template>
  <div class="register-bg">
    <div class="brand-header">
      <img src="/images/17.png" class="brand-logo" alt="logo" />
      <span class="brand-title">Pet Mall 宠物商城</span>
    </div>
    <div class="register-main">
      <img src="/images/19.png" class="side-deco left" alt="cat paw" />
      <div class="register-card">
        <h2 class="register-title">注册新账号</h2>
        <form @submit.prevent="handleRegister">
          <div class="input-group">
            <span class="input-icon"><svg width="20" height="20" fill="#42b983"><circle cx="10" cy="10" r="9" stroke="#42b983" stroke-width="2" fill="none"/><path d="M10 13c-2.5 0-4.5 1-4.5 2.5V17h9v-1.5C14.5 14 12.5 13 10 13z" fill="#42b983"/><circle cx="10" cy="8" r="3" fill="#42b983"/></svg></span>
            <input type="text" v-model="username" placeholder="用户名" autocomplete="username" />
          </div>
          <div class="input-group">
            <span class="input-icon"><svg width="20" height="20" fill="#42b983"><rect x="3" y="8" width="14" height="9" rx="2" fill="none" stroke="#42b983" stroke-width="2"/><path d="M7 8V6a3 3 0 0 1 6 0v2" stroke="#42b983" stroke-width="2" fill="none"/></svg></span>
            <input type="password" v-model="password" placeholder="密码" autocomplete="new-password" />
          </div>
          <div class="input-group">
            <span class="input-icon"><svg width="20" height="20" fill="#42b983"><rect x="3" y="8" width="14" height="9" rx="2" fill="none" stroke="#42b983" stroke-width="2"/><path d="M7 8V6a3 3 0 0 1 6 0v2" stroke="#42b983" stroke-width="2" fill="none"/></svg></span>
            <input type="password" v-model="confirmPassword" placeholder="确认密码" autocomplete="new-password" />
          </div>
          <div class="input-group">
            <span class="input-icon"><svg width="20" height="20" fill="#42b983"><path d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0zm8-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" fill="#42b983"/></svg></span>
            <input type="email" v-model="email" placeholder="邮箱" autocomplete="email" />
          </div>
          <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
          <button class="register-btn" :disabled="!canRegister">注册</button>
          <button class="back-btn" type="button" @click="goLogin">返回登录</button>
        </form>
      </div>
      <img src="/images/18.png" class="side-deco right" alt="dog bone" />
    </div>
    <div class="register-footer">
      <span>© 2024 Pet Mall 宠物商城</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
// import { register } from '@/services/userService' // 接口对接时解开

const router = useRouter()
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const email = ref('')
const errorMessage = ref('')

const canRegister = computed(() => {
  return username.value && password.value && confirmPassword.value && email.value && password.value === confirmPassword.value
})

const handleRegister = async () => {
  if (password.value !== confirmPassword.value) {
    errorMessage.value = '两次密码输入不一致'
    return
  }
  // await register(username.value, password.value, email.value)
  // 注册成功后跳转登录
  router.push('/login')
}
const goLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-bg {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f8fafc 0%, #b2dfdb 100%);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.brand-header {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0 18px 0;
  gap: 16px;
  z-index: 2;
}
.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(66,185,131,0.10);
  object-fit: contain;
}
.brand-title {
  font-size: 2.1em;
  font-weight: bold;
  color: #42b983;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(66,185,131,0.08);
}
.register-main {
  flex: 1;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 500px;
}
.register-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  border-radius: 32px;
  box-shadow: 0 8px 32px rgba(66,185,131,0.13);
  padding: 48px 36px 36px 36px;
  width: 100%;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.register-title {
  color: #42b983;
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 28px;
  letter-spacing: 1px;
}
.input-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 16px;
  border: 1.5px solid #b2dfdb;
  margin-bottom: 22px;
  padding: 0 10px;
  box-shadow: 0 1px 4px rgba(66,185,131,0.04);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.input-group:focus-within {
  border-color: #42b983;
  box-shadow: 0 2px 8px rgba(66,185,131,0.10);
}
.input-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 0;
  font-size: 17px;
  border-radius: 16px;
}
.error-message {
  color: #ff5252;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.05em;
}
.register-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #42b983 0%, #6dd5ed 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px rgba(66,185,131,0.08);
}
.register-btn:disabled {
  background: #a8d5c2;
  cursor: not-allowed;
}
.back-btn {
  width: 100%;
  padding: 12px;
  background: #fff;
  color: #42b983;
  border: 1.5px solid #42b983;
  border-radius: 16px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 0;
  transition: background 0.3s, color 0.3s;
}
.back-btn:hover {
  background: #e0f2f1;
  color: #2e7d32;
}
.side-deco {
  position: absolute;
  top: 50%;
  width: 90px;
  height: 90px;
  opacity: 0.18;
  z-index: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.side-deco.left {
  left: 0;
  width: 220px;
  height: 220px;
  opacity: 0.22;
  bottom: -40px;
  top: auto;
  transform: none;
}
.side-deco.right {
  right: 6vw;
  width: 110px;
  height: 110px;
  opacity: 0.13;
  top: 60%;
  transform: translateY(-50%);
}
.register-footer {
  width: 100vw;
  text-align: center;
  color: #aaa;
  font-size: 1em;
  padding: 24px 0 12px 0;
  letter-spacing: 1px;
  z-index: 2;
}
@media (max-width: 900px) {
  .side-deco.left { width: 120px; height: 120px; }
  .side-deco.right { width: 60px; height: 60px; }
}
</style> 